<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>

<div class="layui-tab" lay-allowClose="true">
    <!--IQC检验详情-->
    <form class="layui-form" action="">
        <div class=" layui-inline">
            <div class=" layui-form-item">
                <div class=" layui-inline">
                    <label class="layui-form-label">检定方式</label>
                    <i class="layui-icon">&#xe60c;</i>
                    <div class="layui-input-inline " style="width: 172px;">
                        <input type="text" name="text" required lay-verify="required" placeholder="检定方式"
                               autocomplete="off" class="layui-input" >
                    </div>
                </div>

                <div class="  layui-inline">
                    <label class="layui-form-label">据点</label>
                    <i class="layui-icon">&#xe615;</i>
                    <div class="layui-input-inline " style="width: 172px;">
                        <input type="text" name="text" required lay-verify="required" placeholder="据点"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="  layui-inline">
                    <label class="layui-form-label">检验方案</label>
                    <i class="layui-icon">&#xe615;</i>
                    <div class="layui-input-inline " style="width: 172px;">
                        <input type="text" name="text" required lay-verify="required" placeholder="检验方案"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class=" layui-form-item">
                <div class=" layui-inline">
                    <label class="layui-form-label">物料编码</label>
                    <div class="layui-input-inline ">
                        <input type="text" name="text" required lay-verify="required" placeholder="物料编码"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="  layui-inline">
                    <label class="layui-form-label">物料描述</label>
                    <div class=" layui-input-inline">
                        <input type="text" name="text" required lay-verify="required" placeholder="物料描述"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="  layui-inline">
                    <label class="layui-form-label">供应商</label>
                    <div class=" layui-input-inline">
                        <input type="text" name="text" required lay-verify="required" placeholder="供应商"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class=" layui-form-item">
                <div class=" layui-inline">
                    <label class="layui-form-label">待检数量</label>
                    <div class="layui-input-inline ">
                        <input type="text" name="text" required lay-verify="required" placeholder="待检数量"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="  layui-inline">
                    <label class="layui-form-label">抽检数量</label>
                    <div class=" layui-input-inline">
                        <input type="text" name="text" required lay-verify="required" placeholder="抽检数量"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="  layui-inline">
                    <label class="layui-form-label">合格数量</label>
                    <div class=" layui-input-inline">
                        <input type="text" name="text" required lay-verify="required" placeholder="合格数量"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class=" layui-form-item">
                <div class=" layui-inline">
                    <label class="layui-form-label">不合格数量</label>
                    <div class="layui-input-inline ">
                        <input type="text" name="text" required lay-verify="required" placeholder="不合格数量"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="  layui-inline">
                    <label class="layui-form-label">留样数量</label>
                    <div class=" layui-input-inline">
                        <input type="text" name="text" required lay-verify="required" placeholder="留样数量"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="  layui-inline">
                    <label class="layui-form-label">不良率</label>
                    <div class=" layui-input-inline">
                        <input type="text" name="text" required lay-verify="required" placeholder="不良率"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class=" layui-form-item">
                <div class=" layui-inline">
                    <label class="layui-form-label">检验结果</label>
                    <div class="layui-input-inline ">
                        <input type="text" name="text" required lay-verify="required" placeholder="检验结果"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="  layui-inline">
                    <label class="layui-form-label">拒收率</label>
                    <div class=" layui-input-inline">
                        <input type="text" name="text" required lay-verify="required" placeholder="拒收率"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="  layui-inline">
                    <label class="layui-form-label">备注</label>
                    <div class=" layui-input-inline">
                        <input type="text" name="text" required lay-verify="required" placeholder="备注"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <!--表格-->
        <div class=" layui-inline">
            <table class="layui-table" lay-size="sm">
                <colgroup>
                    <col width="70">
                    <col width="20">
                    <col width="70">
                    <col width="70">
                    <col width="70">
                </colgroup>
                <thead>
                <tr>
                    <th>缺陷等级</th>
                    <th>AQI</th>
                    <th>允许数</th>
                    <th>拒收数</th>
                    <th>不良数</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>致命缺陷</td>
                    <td>1</td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>严重缺陷</td>
                    <td>2</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>轻微缺陷</td>
                    <td>11</td>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--事件按钮-->
        <div class="">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">保存</button>
            <button type="submit" class="layui-btn layui-btn-primary layui-btn-radius">提交</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">后退</button>
        </div>
    </form>
    <!--选项卡-->
    <div class="layui-tab" lay-filter="test">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="11">检验项目</li>
            <li lay-id="22">检验明细</li>
        </ul>
        <div class="layui-tab-content" style="width: 98%">
            <!--检验项目-->
            <div class="layui-tab-item layui-show">
                <table class="layui-table">
                    <colgroup>
                        <col width="5">
                        <col width="5">
                        <col width="5">
                        <col width="5">
                        <col width="5">
                        <col width="5">
                        <col width="5">
                        <col width="5">
                        <col width="5">
                        <col width="5">
                        <col width="5">
                        <col width="5">
                        <col width="5">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>√</th>
                        <th>序列号</th>
                        <th>批次号</th>
                        <th>MPN</th>
                        <th>供应商编码</th>
                        <th>DateCode</th>
                        <th>待检数量</th>
                        <th>抽检数量</th>
                        <th>合格数量</th>
                        <th>不合格数量</th>
                        <th>留样数量</th>
                        <th>修改人</th>
                        <th>修改日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><input type="checkbox" name="" class="ck"></td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="" class="ck"></td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                        <td>贤心</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!--检验明细-->
            <div class="layui-tab-item">内容2</div>
        </div>
    </div>
</div>

    <script src="../../static/layui/layui.js"></script>
    <script>
        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
        });
    </script>

</body>
</html>